<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="keywords" content="opensource rich wysiwyg text editor jquery bootstrap execCommand html5"/>
    <meta name="description"
          content="This tiny jQuery Bootstrap WYSIWYG plugin turns any DIV into a HTML5 rich text editor"/>
    <link href="wysiwyg/external/google-code-prettify/prettify.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css"
          th:href="@{bootstrap/css/bootstrap-responsive.min.css}"/>
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="wysiwyg/external/jquery.hotkeys.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="wysiwyg/external/google-code-prettify/prettify.js"></script>
    <link href="wysiwyg/index.css" rel="stylesheet">
    <script src="wysiwyg/bootstrap-wysiwyg.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/base64.js"></script>
    <script src="js/vue-context-menu.js"></script>
</head>
<body>
<style>
    .editor {
        overflow: scroll;
        height: 300px;
        max-height: 300px;
        background-color: white;
        font-size: 8px;
    }
</style>

<div class="container-fluid" id="pageForm">
    <div class="row-fluid"><h1>Test</h1></div>
    <div class="row-fluid">
        <div class="span3">
            <div class="row-fluid">
                <div class="input-group">
                    <input type="text" class="form-control input-group-sm" placeholder="输入关键字进行搜索">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-primary">搜索</button>
                    </span>
                </div>
            </div>
            <div class="row-fluid">
                <div class="col-12">
                    <table class="table table-hover table-success">
                        <thead class="thead-default">
                        <tr>
                            <th>序号</th>
                            <th>设备名称</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(t,index) in ts">
                            <td><input type="radio" name="t_ids"  value="{{t.id}}"></td>
                            <td v-on:click="getDetail(t.id)">{{t.name}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row-fluid">
                <button class="btn btn-primary btn-lg" >新增</button>
                <button class="btn btn-primary btn-lg">复制</button>
            </div>
        </div>
        <div class="span6">

            <div class="input-group">
                <span for="template_code">编码</span>
                <input type="text" class="form-control" id="template_code" placeholder="请输入编码">
            </div>
            <div class="input-group">
                <span for="template_name">名称</span>
                <input type="text" class="form-control" id="template_name" placeholder="请输入名称">
            </div>
            <div class="input-group">
                <span for="title">标题</span>
                <input type="text" class="form-control" id="title" placeholder="请输入标题">
            </div>

            <div th:include="editor::editor ('title1','head','alter1')"></div>

            <div th:include="editor::editor ('title2','body','alter2')">...</div>

            <div>
                <button class="btn btn-primary btn-lg" v-on:click="saveTemplate">保存</button>
            </div>

            <h2>参数设置</h2>
            <div class="input-group">
                <span for="client_id">ClientId</span>
                <input type="text" class="form-control" id="client_id" placeholder="请输入ClientId">
            </div>
            <div class="input-group">
                <span for="login_id">LoginId</span>
                <input type="text" class="form-control" id="login_id" placeholder="请输入LoginId">
            </div>
            <div>
                <button class="btn btn-primary btn-lg" >预览</button>
            </div>
            <div>
                <textarea class="form-control" rows="5" style="width: 100%"></textarea>
            </div>
        </div>
        <div class="span3">
            <div class="row-fluid">
                <div class="input-group">
                    <input type="text" class="form-control input-group-sm" placeholder="输入关键字进行搜索">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-primary">搜索</button>
                    </span>
                </div>
            </div>
            <div class="row-fluid">
                <div class="col-12">
                    <table class="table table-hover table-success">
                        <thead class="thead-default">
                        <tr>
                            <th>序号</th>
                            <th>名称</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(d,index) in ds">
                            <td><input type="radio" name="d_ids"  value="{{d.id}}"></td>
                            <td v-on:click="getDatasource(d.id)">{{d.data_source_name}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row-fluid">
                <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">新增</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">标题</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label for="code">编码</label>
                        <input type="text" class="form-control" id="code" placeholder="请输入编码">
                    </div>
                    <div class="form-group">
                        <label for="name">名称</label>
                        <input type="text" class="form-control" id="name" placeholder="请输入名称">
                    </div>
                    <div class="form-group">
                        <label for="class_name">全路径名称</label>
                        <input type="text" class="form-control" id="class_name" placeholder="请输入全路径名称">
                    </div>
                    <div class="form-group">
                        <label for="return_type">返回类型</label>
                        <input type="text" class="form-control" id="return_type" placeholder="请输入返回类型">
                    </div>
                    <div class="form-group">
                        <label for="type">类型</label>
                        <input type="text" class="form-control" id="type" placeholder="请输入类型">
                    </div>
                    <div class="form-group">
                        <label for="content">内容</label>
                        <input type="text" class="form-control" id="content" placeholder="请输入内容">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div @contextmenu="showMenu">
    <VueContextMenu :contextMenuData="menuData" @refresh="refreshxxx" @add="addxxx" @del="delxxx">
    </VueContextMenu>
    <xxx></xxx>
</div>

<script>
    new Vue({
        el: "#pageForm",
        data: {
            id: '',
            ts: [],
            ds: [],
            head: '',
            body: '',
            contextMenuTarget: document.body,
            contextMenuVisible: false,
            menuData:{
                menuName:'name1',
                axios:{x:null, y:null},
                menulists:[
                    {fnHandler:'refresh',icoName:'el-icon-setting',btnName:'刷新'},
                    {fnHandler:'add',icoName:'el-icon-more',btnName:'添加'},
                    {fnHandler:'del',icoName:'el-icon-delete',btnName:'删除'},
                ],
            },
            pageSize: 10,
            pageNum: 1
        },
        methods: {
            getTemplateList: function () {
                _self = this;
                $.ajax({
                    type: "post",
                    url: "templates",
                    dataType: "json",
                    data: {'pageSize': this.pageSize, 'pageNum': this.pageNum},
                    success: function (result) {
                        _self.ts = result;
                    }
                });
            },
            searchTemplate: function (key) {

            },
            getDetail: function (id) {
                this.id = id;
                $.ajax({
                    type: "post",
                    url: "templateDetail",
                    dataType: "json",
                    data: {'id': id},
                    success: function (result) {
                        $('#head').text(Base64.decode(result.head));
                        $('#body').text(Base64.decode(result.body));
                    }
                });
            },
            saveTemplate: function () {
                $.ajax({
                    type: "post",
                    url: "saveTemplate",
                    dataType: "json",
                    data: {
                        'id': this.id,
                        'title':$('#title').val(),
                        'head': Base64.encode($('#head').text()),
                        'body': Base64.encode($('#body').text())
                    },
                    success: function (result) {
                        alert(result);
                    }
                });
            },
            getDatasource: function (key) {
                _self = this;
                $.ajax({
                    type: "post",
                    url: "getDatasource",
                    dataType: "json",
                    data: {'pageSize': this.pageSize, 'pageNum': this.pageNum},
                    success: function (result) {
                        _self.ds = result;
                    }
                });
            },
            sleep: function (n) {
                var start = new Date().getTime();
                while (true) {
                    if (new Date().getTime() - start > n) {
                        break;
                    }
                }
            },
            showMenu:function (parameter) {
                parameter.preventDefault()
                var x = parameter.clientX
                var y = parameter.clientY
                this.entityTreeContextMenu.axios = {
                    x, y
                }
            },
            copyMsg:function () {
                alert('copy')
                this.contextMenuVisible = false
            },
            quoteMsg:function () {
                alert('quote')
                this.contextMenuVisible = false
            },
            deleteMsg:function () {
                alert('delete')
                this.contextMenuVisible = false
            }

        },
        mounted: function () {

            this.getDatasource();

            this.sleep(2000);
            this.getTemplateList();
        }
    })
    ;
</script>
</body>
</html>
